<template>
	<!-- 问题分类 -->
	<view>
	 
	 <view class="feedback-title" >问题分类：</view>
	 <view class="feedback-content">
	 <picker class="selectType" v-for="(item,index) in listProblem" mode="selector" :range="item.content" @change="pickerProblemChange" @click="pickerIndex = index">
	 	<view class="picker">{{item.text}}</view>
	 </picker>
	 </view>
	 
	<!-- 意见反馈 -->
   <view>
     <view class="feedback-title">意见反馈：</view>
     <view class="feedback-content">
     <textarea class="feedback-textarea" placeholder="请输入您要反馈的问题" v-model="feedbackContent"></textarea>
    </view>
	</view>
	
    <view class="feedback-title">反馈图片：</view>
     <view class="feedback-image-box">
       <view class="feedback-image-item">
        <view class="image-box">
           <image :src="filePaths" v-model="filePaths"/>
         </view>
      </view>
       <view class="feedback-image-item">
        <view class="image-box">
          <uni-icons type="plusempty" size="50" color="#eee" @click="handleChooseImage()"></uni-icons>
		</view>
      </view>
     </view>
     <button class="feedback-button" type="" @click="handleUploadFile()">提交反馈意见</button>

   <view class="bottom"></view>
   	<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
   </view>
</template>

<script>
import global from '@/global.js'

export default {
   data() {
    return {
		//当前选项卡
		currentTab:'/pages/myMain/feedback',
		feedbackContent:'',
		listProblem: [],
		selectItem:'0',
		filePaths:'',
	}
   },
   methods: {
	   pickerProblemChange:function(e){
			this.listProblem[this.pickerIndex].text = this.listProblem[this.pickerIndex].content[e.detail.value];
			this.selectItem= this.listProblem[this.pickerIndex].content[e.detail.value];
	   },
	   handleChooseImage() {
	   			uni.chooseImage({
	   				count: 3,
	   				sourceType: ['album'],
	   				success: res => {
	   					this.filePaths = res.tempFilePaths[0];
						console.log("caches get filePaths value :  ", this.filePaths)
	   				}
	   			});
		},
		handleUploadFile() {
				var token = uni.getStorageSync("token")
				var phone = uni.getStorageSync("phone")
				console.log("caches get selectItem value :  ", this.selectItem)
				if(this.feedbackContent=='' || this.selectItem=='0'){
					return;
				}
				console.log("this.filePaths  :  ", this.filePaths)
				uni.uploadFile({
					url: global.baseUrl + 'api/feedUser/upload',
					filePath: this.filePaths,
					name:'files',
					header: {
						'X-Token': token
					},
					formData: {
						feedbackContent: this.feedbackContent,
						feedbackCategory: this.selectItem,
					},
					success: (res) => {
						uni.showToast({
						   title: '提交成功',
						});
						this.feedbackContent='';
						this.selectItem='0';
					},
					fail: (res) => {
						uni.showToast({
						   title: '上传失败',
						});
					}
		    })
		},
	   proData() {
	   		uni.request({
	   			url: global.baseUrl + 'api/feedUser/problem', // 接口地址
	   			method: 'get',
	   			dataType: "json",
				data:{
					type: 2,
				},
	   			header: {
	   				'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
	   			},
	   			success: (request) => {
					console.log("request result : ", request.data.code)
	   				if (request.data.code == 0) {
	   					this.listProblem = request.data.data
	   				} else {
	   					console.log("request result error: ", request.data.code)
	   				}
	   			},
	   			fail: (error) => {
	   				console.log(error)
	   			}
	   		})
	   	},
	   onLoad() {
	   	this.proData()
	   }
    }
	
}
</script>
<style lang="scss">
 .feedback-title {
   margin: 15px;
   margin-bottom: 0;
   font-size: 14px;
   color: #666;
 }
 .selectType{
	 border: 1px #eee solid;
	 height: 35px;
 }
 .feedback-content {
   margin: 15px;
   padding: 10px;
   box-sizing: border-box;
   border: 1px #eee solid;
   .feedback-textarea {
     font-size: 12px;
     width: 100%;
     height: 120px;
   }
 }
 .feedback-image-box {
   display: flex;
   flex-wrap: wrap;
   padding: 10px;
   .feedback-image-item {
     position: relative;
     width: 33.33%;
     height: 0;
     padding-top: 33.33%;
     box-sizing: border-box;
     .close-icon {
       display: flex;
       justify-content: center;
       align-items: center;
       position: absolute;
       right: 0;
       top: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: #ff5a5f;
      z-index: 2;
     }
     .image-box {
       display: flex;
       justify-content: center;
       align-items: center;
       position: absolute;
       top: 5px;
       right: 5px;
       bottom: 5px;
       left: 5px;
       border: 1px #eee solid;
       border-radius: 5px;
       overflow: hidden;
       image {
         width: 100%;
         height: 100%;
       }
     }
   }
 }
 .feedback-button {
   margin: 0 15px;
   background-color: #E0E0E0;
 }
</style>